
<!-- saved from url=(0081)http://renderengine.googlecode.com/svn/tags/v1.5.3/tutorials/tutorial9/index.html -->
<html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1"><meta http-equiv="X-UA-Compatible" content="IE=9;chrome=1">



   
      <title>Tutorial Nine: Two Birds of a Feather</title>

		<!-- FlashCanvas for older IE -->
		<!--[if lt IE 9]>
		<script type="text/javascript" src="../../libs/flashcanvas.js"></script>
		<![endif]-->

      <!-- Load the supporting libraries -->
      <script type="text/javascript" src="./The Render Engine - Javascript Game Engine PAGE 2_files/base.js"></script>
      <script type="text/javascript" src="./The Render Engine - Javascript Game Engine PAGE 2_files/jquery.js"></script>
      <script type="text/javascript" src="./The Render Engine - Javascript Game Engine PAGE 2_files/jquery.ext.engine.js"></script>
      <script type="text/javascript" src="./The Render Engine - Javascript Game Engine PAGE 2_files/sylvester.js"></script>

      <!-- Load the main engine script -->
      <script type="text/javascript" src="./The Render Engine - Javascript Game Engine PAGE 2_files/engine.js"></script>

   <style type="text/css">div.loadbox {width:325px;height:30px;padding:10px;font:10px Arial;border:1px outset gray;-moz-border-radius:10px;-webkit-border-radius:10px} #engine-load-progress { position:relative;border:1px inset gray;width:300px;height:5px} #engine-load-progress .bar {background:silver;}</style><style type="text/css">
body {
	overflow: hidden;
	margin: 0;
	font: 10pt Arial;
}

div.metrics {
   position: fixed;
   top: 10px;
   width: 200px;
   right: 10px;
   border: 1px solid black;
   background: white;
   padding: 2px;
   font: 10px Arial, Helvetica;
	z-index: 10000;
}

div.metrics .items {
   clear: both;
   position: relative;
   width: 200px;
   background: ghostwhite;
}

div.metric-button {
   background-color: silver;
   width: 15px;
   height: 15px;
   border: 1px outset white;
   float: left;
   margin-right: 3px;
}

div.metric-button.close,
div.metric-button.minimize,
div.metric-button.maximize {
   float: right;
}

.run {
   background: url('http://renderengine.googlecode.com/svn/tags/v1.5.3/css/run.png') no-repeat;
}

.pause {
   background: url('http://renderengine.googlecode.com/svn/tags/v1.5.3/css/pause.png') no-repeat;
}

.shutdown {
   background: url('http://renderengine.googlecode.com/svn/tags/v1.5.3/css/shutdown.png') no-repeat;
}

.minimize {
   background: url('http://renderengine.googlecode.com/svn/tags/v1.5.3/css/minimize.png') no-repeat;
}

.maximize {
   background: url('http://renderengine.googlecode.com/svn/tags/v1.5.3/css/maximize.png') no-repeat;
}

.close {
   background: url('http://renderengine.googlecode.com/svn/tags/v1.5.3/css/close.png') no-repeat;
}

canvas.engine-profile {
   position: fixed;
   bottom: 10px;
   width: 150px;
	height: 100px;
   left: 10px;
   border: 1px solid white;
   background: black;
	z-index: 10000;
}

</style></head>
   <body id="DocumentContext1">
      <script type="text/javascript">
       	$(document).ready(function() {
	         // Load the game's script
	         Engine.loadGame('game.js','Tutorial9','Tutorial 9: Two Birds of a Feather');
			});
      </script>
   

<canvas id="Playfield9" width="480" height="480" style="background-color: black; "></canvas><div style="background-image: initial; background-attachment: initial; background-origin: initial; background-clip: initial; background-color: black; display: none; background-position: initial initial; background-repeat: initial initial; "><img src="./The Render Engine - Javascript Game Engine PAGE 2_files/tutorial9.png" width="232" height="170"></div></body></html>